
<template>
    <div class="home-wall">
        <div class="home-body">
            <Hearder></Hearder>
            <Nav></Nav>
            <Content></Content>
        </div>
    </div>
</template>
<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import soImg from '@/assets/img/so.jpg';
import { reactive, watch } from 'vue';
import { getFriends } from '@/api/index'
import { getChatRecordList } from '@/api/index'
import { sendMessage } from '@/api/index'
import { ElMessage } from 'element-plus'
import {userStore} from '@/store/user'
import { useWebsocket } from '@/hooks/index'
import Nav from "@/components/Nav.vue"
import Hearder from '@/components/Header.vue'
import Content from '@/components/Content.vue'

onMounted(() => {
    userStore().setUserInfo();
    // 绑定监听事件
    window.addEventListener('keydown', submit)
})
onUnmounted(() => {
    // 销毁事件
    window.removeEventListener('keydown', submit, false)
})

let data = reactive({

    firends: [

    ],
    chatRecords: [
        {
            from: 1,
            content:''
        }
    ],
})
const ws = useWebsocket(handleMessage);

const waitForConnection = function (callback, interval) {
    if (ws.readyState === 1) {
        callback();
    } else {
        var that = this;
        // optional: implement backoff for interval here
        setTimeout(function () {
            waitForConnection(callback, interval);
        }, interval);
    }
};



// do not use same name with ref
const form = reactive({
    content: '',
})




getFriends().then(res => {
    data.firends = res;
    data.toUser = data.firends[0];
}).catch(error => {
    console.log(error, "请求数据");
})

getChatRecordList().then(res => {
    data.chatRecords = res;
})
const submit = (e) => {
    if (e.keyCode === 13 || e.keyCode === 100) {
        onSubmit()
    }
}

const writeTextarea = ref(null);
const  onSubmit = () => {
    let sendBody = {
        from: data.fromUser.id,
        to: data.toUser.id,
        content: form.content
    }
    sendMessage(sendBody).then(res => {
        console.log("发送成功")
        data.chatRecords.push(sendBody);
        form.content = null;
        writeTextarea.value.focus()
    })

}

function handleMessage(wsMessage) {
    const resp = JSON.parse(wsMessage.data);
    if (resp.code == 501) {
        ElMessage.error(resp.data)
        localStorage.removeItem('Authorization')
        location.reload();
    }
    //如果成功收到消息，往记录里追加数据
    data.chatRecords.push(resp);
}

function setMsgRecordScorll() {
    const msgscroll = document.querySelector('.message-record');
    if (msgscroll == null) {
        return;
    }
    console.log('top:' + msgscroll.scrollTop);
    console.log('height:' + msgscroll.scrollHeight);
    msgscroll.scrollTop = msgscroll.scrollHeight;
}


watch(() => data.chatRecords, (newVal, oldVal) => {
    console.log(newVal)
    setTimeout(() => {
        setMsgRecordScorll()
    });
}, {
    immediate: true,
    deep: true
}
);

</script>
    
<style scoped>
.home-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1000px;
    height: 900px;
    background-color: black;
    border-radius: 1em;
    color: white;
}



.demo-image__preview {
    height: 100%;
}

.company-col {
    text-align: center;
}

.contacts-col {
    min-height: 87vh;
    border-right: 0.5px rgb(49, 49, 47) dashed;
}

.contacts-col .demo-image__preview {
    line-height: 10vh;
    text-align: right;
}

.contacts-col .el-image {
    transform: translate(0%, 40%);
    border-radius: 0.5em;
}

.chat-span {
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    background-color: #060606;
}

.message-record {
    overflow: scroll;
    word-wrap: break-word;
    height: 70.5vh;
    background-color: white;
    border-bottom: 0.5px grey dashed;
    color: black;
}

.message-record::-webkit-scrollbar {
    display: none;
}

.write-message {
    /* min-height: 33.96vh; */
    background-color: white;
    color: black;
}

.icon-row {
    line-height: 40px;
    height: 40px;
    width: 100%;
    text-align: center;
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 30px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: gray;
}

.send-row {
    width: 100%;
    /* border: 1px red solid; */
    /* height: 28vh; */
}

.send-row .el-form {
    width: 100%;
}

.el-form-item {
    width: 100%;
}

.textarea-row {
    width: 96%;
    transform: translate(20px, 10px);
}

/* 渐变边框 */
.el-input__inner {
    border-image: linear-gradient(to right, #000718, #23b7cb) 5 5 !important;
    /* 自定义其他样式时 注意加 !important 安全一些 */
}

.el-textarea__inner {
    border: 1px red solid;
}

.send-img {
    top: 50%;
    transform: translate(0, -50%);
    width: 60px;
    height: 60px;
    border-radius: 0.5em;
}









body {
    margin: auto !important;
}

.home-wall{
    text-align: center;
    background-color: #060606;
    background-size: cover;
    width: 100wh;
    height: 98.3vh;
    background-image: url("@/assets/img/homeback.webp");
}
</style>